<template>
  <div class="box">
    <van-nav-bar left-arrow @click-left="onClickLeft" size="18px" color="#000"/>

    <h1>选择你的性别：</h1>
    <div @click="top($event)" class="box1">
      <p class="nan"></p>
      <p ref="xing1" style="font-size: 20px">男</p>
    </div>

    <div @click="top1($event)" class="box2">
      <p class="nv"></p>
      <p ref="xing" style="font-size: 20px">女</p>
    </div>
    <van-button type="primary" size="large" class="btn-l" to="/mybiao" @click="xing">下一步</van-button>
  </div>
</template>

<script>
export default {
  name: "Myxing",
  methods: {
    top(e) {
      console.log(this.$refs.xing1.innerHTML);
      let xing=this.$refs.xing1.innerHTML
      if (this.$refs.xing1.style.color != "red") {
        this.$refs.xing1.style.color = "red";
        this.$refs.xing.style.color = "#000";
        this.$store.commit('xing',xing)
        
        this.$refs.xing1.style.fontWeight = 800;
      } else {
        this.$refs.xing1.style.color = "#000";

        this.$refs.xing1.style.fontWeight = 100;
      }
    },
    top1(e) {
      console.log(this.$refs.xing.innerHTML);
      let xing=this.$refs.xing.innerHTML
      if (this.$refs.xing.style.color != "red") {
        this.$refs.xing.style.color = "red";
        this.$refs.xing1.style.color = "#000";

        this.$refs.xing.style.fontWeight = 800;
        this.$store.commit('xing',xing)
      } else {
        this.$refs.xing.style.color = "#000";
        this.$refs.xing.style.fontWeight = 100;
      
        
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
   
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  overflow: hidden;
  padding: 140px 20px 0 20px;
  box-sizing: border-box;
  text-align: center;
}
.box1 {
  display: flex;
  flex-direction: column;
   justify-items:start ;
  justify-content: space-between; 
 
}

.box .nv {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  background: url(
      https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=829044612,3699393036&fm=27&gp=0.jpg
    )
    center;
  background-size: cover;
  text-align: center;
   margin: 20px 0 20px 118px; 
}
.box .nan {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  background: url(
      https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2777154307,2862458646&fm=27&gp=0.jpg)
    center;
  background-size: cover;
  text-align: center;
  margin: 20px 0 20px 118px;
}
.box .btn-l {
  position: absolute;
  bottom: 0px;
  left: 0;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
